<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div id="nav">
      <ul>
        <li>首页</li>
        <li>产品</li>
      </ul>
    </div>
    <script>
      //1.getE1 ementsByC1 assName根据类名获得某些元素集合
      var boxs = document.getElementsByclassName("box");
      console.log(boxs);
      //2.querySelector返回指定选择器的第一个元素对象
      //切记里面的选择器需要加符号.box#nav
      var firstBox = document.querySelector(".box");
      console.log(firstBox);
      var nav = document.querySelector("#nav");
      console.log(nav);
      var li = document.querySelector("li");
      console.log(li);
      //3.querySelectorA11()返回指定选择器的所有元素对象集合
      var allBox = document.querySelectorAll(".box");
      console.log(allBox);
      var lis = document.querySelectorAll("li");
      console.log(lis);
    </script>
  </body>
</html>
